<template>
  <div class="contents">
    <div class="regtotal">
      <div class="perAll">
        <div class="ageEch">
          <Age />
        </div>
        <div class="sexEch">
          <Sex />
        </div>
      </div>
      <div class="perType">
        <ul class="perTypeN">
          <li class="perOne">
            <h4><span>住户</span><span>租户</span></h4>
            <div class="oneFlex">
              <div class="person">
                <strong>123456</strong>
                <span>人员总数</span>
              </div>
              <div class="curNum">
                <strong>321</strong>
                <span>人员总数</span>
              </div>
            </div>
          </li>
          <li class="perOne">
            <h4><span>服务人员</span><span>从业人员</span></h4>
            <div class="oneFlex">
              <div class="person">
                <strong>123456</strong>
                <span>人员总数</span>
              </div>
              <div class="curNum">
                <strong>321</strong>
                <span>人员总数 </span>
              </div>
            </div>
          </li>
          <li class="perOne">
            <h4><span>访客</span><span>陌生人</span></h4>
            <div class="oneFlex">
              <div class="person">
                <strong>123456</strong>
                <span>人员总数</span>
              </div>
              <div class="curNum">
                <strong>321</strong>
                <span>人员总数 </span>
              </div>
            </div>
          </li>
        </ul>
        <ul class="houseType">
          <li class="houseOne">
            <div class="oneFlex">
              <div class="houseData">
                <img src="@/assets/data/fangyuanshu.png" alt="" />
              </div>
              <div class="houseData">
                <strong>321</strong>
                <span>房屋总数 </span>
              </div>
            </div>
          </li>
          <li class="houseOne">
            <div class="oneFlex">
              <div class="houseData">
                <strong>123456</strong>
                <span>出租</span>
              </div>
              <div class="houseData">
                <strong>321</strong>
                <span>空闲 </span>
              </div>
            </div>
          </li>
          <li class="houseOne">
            <div class="oneFlex">
              <div class="houseData">
                <strong>123456</strong>
                <span>人员总数</span>
              </div>
              <div class="houseData">
                <strong>321</strong>
                <span>人员总数 </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="regstatist">
      <div class="curtrend">
        <h3>一天内通行趋势</h3>

        <Statist></Statist>
      </div>
      <div class="contrast">
        <h3>通行次数</h3>
        <Contrast></Contrast>
      </div>
    </div>
    <div class="perOther">
      <div class="car">
        <h3>房屋</h3>
      </div>
      <div class="house">
        <h3>车辆</h3>
      </div>
      <div class="vill">
        <h3>小区类型</h3>
      </div>
    </div>
  </div>
</template>

<script>
import Sex from "./echarts/sex";
import Age from "./echarts/age";
import Statist from "./echarts/statist";
import Contrast from "./echarts/contrast";

export default {
  components: {
    Sex,
    Age,
    Statist,
    Contrast,
  },
  data() {
    return {
      dataCount: {},
      // 昨天
      yesterCount: {},
      ydata: [0, 0, 0, 0, 0, 0, 0],
      zdata: [0, 0, 0, 0, 0, 0, 0],
      xdata: ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  mounted() {
    // this.resizefun = () => {
    //   this.$echarts.init(this.$refs.chartper).resize();
    //   this.$echarts.init(this.$refs.charthouse).resize();
    // };
    // window.addEventListener("resize", this.resizefun);
  },
  // beforeDestroy() {
  //   window.removeEventListener("resize", this.resizefun);
  //   this.resizefun = null;
  // },
  methods: {},
};
</script>

<style lang="scss" scoped>
.contents {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 10px;
  background: rgb(216, 221, 224);
}
.regtotal {
  // height: 25%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.perAll {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  width: 40%;
  box-sizing: border-box;
  overflow: hidden;
  background: rgb(247, 253, 253);
}
.ageEch {
  width: 60%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.sexEch {
  width: 40%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.perType {
  width: 60%;
  box-sizing: border-box;
  overflow: hidden;
}
.perTypeN,
.houseType {
  display: flex;
  justify-content: space-between;
}

.regstatist {
  height: 45%;
  // margin-top: 20px;
  box-sizing: border-box;
  // backgr
  display: flex;
  justify-content: space-between;
}
.curtrend {
  height: 100%;
  background: rgb(247, 253, 253);
  width: 70%;
}
.contrast {
  // background: #12337a;
  background: rgb(247, 253, 253);
  margin-left: 20px;
  width: 30%;
}
.perOne {
  width: 31.5%;
  background: rgb(247, 253, 253);
  padding: 10px;
  box-sizing: border-box;
  margin: 10px 0 0 10px;
  border-radius: 16px;
  h4 {
    font-size: 14px;
    padding: 0 20px;
    display: flex;
    // span{
    //   display: inline-block;
    //   width: 50%;
    // }
    justify-content: space-between;
  }

  .oneFlex {
    display: flex;
    justify-content: center;
    span {
      display: block;
    }
  }
  .person {
    border-right: 1px solid rgb(216, 221, 224);
  }
  .person,
  .curNum {
    width: 50%;
    box-sizing: border-box;
    // background: slategrey;
    padding: 10px;
    text-align: center;
    span {
      font-size: 12px;
      margin-top: 5px;
    }
  }
  .person {
    strong {
      color: rgb(38, 192, 253);
    }
  }
  .curNum {
    strong {
      color: rgb(38, 192, 253);
    }
  }
}

.houseData {
  strong {
    color: rgb(240, 156, 29);
  }
}

.houseOne {
  width: 31.5%;
  background: rgb(247, 253, 253);
  padding: 10px;
  box-sizing: border-box;
  margin: 10px 0 0 10px;
  border-radius: 16px;
  .oneFlex {
    display: flex;
    justify-content: space-around;
    text-align: center;
    span {
      display: block;
    }
    img {
      height: 100%;
    }
  }
  // background: rgb(82, 152, 212);
  // color: aliceblue;
}
// 其他
.perOther {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  height: 30%;
}
.vill,
.house,
.car {
  flex: 1;
  background: rgb(247, 253, 253);
}
.house {
  margin: 0 10px;
}
</style>

